<template>
  <div>
<!--    导航条-->
    <headers></headers>
<!--    轮播图-->
    <div style="background: #EEE;margin-top: 10px">
      <Carousel v-model="value1" loop autoplay>
        <CarouselItem>
            <div class="demo-carousel">
              <img src="../assets/banner.jpg" alt="" >
              <div class="title animate__animated animate__backInDown">N6-506 IT工程中心—智能物联网实验室</div>
            </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <img src="../assets/banner01.jpg" alt="" >
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <img src="../assets/banner02.jpg" alt="">
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <img src="../assets/banner03.png" alt="">
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <img src="../assets/banner04.jpg" alt="">
          </div>
        </CarouselItem>
      </Carousel>
    </div>
<!--    主题-->
    <Row style="margin-top: 20px">
      <iCol span="12">
        <h1>每周组会</h1>
        <Card style="margin: 10px;height: 300px;"> <!-- overflow: scroll"-->
          <List>
            <ListItem class="magnify">
              <img src="http://10.18.52.137/oldfile/pic/zuhui/2021-1/9/2021-4-28-1.jpg" width="20%"/>
              <ListItemMeta title="2021-4-28第九周组会" description="实验室在新教室召开组会" />
            </ListItem>
            <ListItem class="magnify">
              <img src="http://10.18.52.137/oldfile/pic/zuhui/2021-1/8/2021-4-21-1.jpg" width="20%"/>
              <ListItemMeta title="2021-4-21第八周组会" description="实验室参加无人驾驶比赛并积极准备" />
            </ListItem>
            <ListItem class="magnify">
              <img src="http://10.18.52.137/oldfile/pic/zuhui/2021-1/7/2021-4-14-1.jpg" width="20%"/>
              <ListItemMeta title="2021-4-14第七周组会" description="服创比赛提交最终结果" />
            </ListItem>
          </List>
        </Card>
      </iCol>
      <iCol span="12">
        <h1>新闻动态</h1>
        <Card style="margin: 10px;height: 300px">
          <List>
            <ListItem style="height: 90px" class="magnify">
              <img src="https://cse.cslg.edu.cn/__local/4/88/77/B4D6A8BFDB42243B854E69A8DD8_7CED7115_1E544.jpg?e=.jpg" width="15%" style="padding-left: 30px"/>
              <ListItemMeta title="2021-4-18" description="第十二届蓝桥杯比赛" />
            </ListItem>
            <ListItem style="height: 90px" class="magnify">
              <img src="http://fwwb.org.cn/static/images/logo.jpg" width="20%" style="padding-left: 30px"/>
              <ListItemMeta title="2021-4-23" description="服务创新创业比赛提交" />
            </ListItem>
            <ListItem class="magnify">
              <img src="../assets/car.jpg" width="20%" style="padding-left: 30px"/>
              <ListItemMeta title="2021-5-15" description="无人驾驶智能小车提交报名" />
            </ListItem>
          </List>
        </Card>
      </iCol>
    </Row>
<!--    页脚-->
    <footers></footers>

  </div>
</template>

<style>
/*header*/
  .top{
    margin-left:30px;
  }
  /*banner*/
  .demo-carousel{
    position: relative;
    width: 100%;
    height: 500px;
    background: #ffffff;
  }
  .demo-carousel img{
    width: 90%;
    height: 100%;
    position: absolute;
    left: 80px;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .title{
    position:absolute;
    z-index:1;
    font-size: 48px;
    font-weight: bolder;
    margin: 100px 340px;
  }
  .magnify img{
    cursor: pointer;
    transition: all 0.6s;
  }
  .magnify img:hover{
    transform: scale(1.1);
  }
  /*.demo-split{*/
  /*  height: 200px;*/
  /*  border: 1px solid #dcdee2;*/
  /*}*/
  /*.demo-split-pane{*/
  /*  padding: 10px;*/
  /*}*/

</style>

<script>
import headers from "../components/headers.vue";
import footers from "../components/footers.vue";
export default {
  name: 'Home',
  components:{  //你这
    headers,
    footers,
  },
  data () {
    return {
      value1:0,
      split1:0.5,
    }
  }
}
</script>
